<template>
    <div>
      <div class="layui-form-item">
          <div style="padding: 20px 0;">
              <el-form-item label="选择省市县" >
                  <el-select v-model="provinceid" placeholder="请选择省" @change="getC">
                      <el-option
                          v-for="item in pArr"
                          :key="item.value"
                          :label="item.province"
                          :value="item.provinceid">
                      </el-option>
                  </el-select>
                  <el-select v-model="cityid" placeholder="请选择市" @change="getA">
                      <el-option
                          v-for="item in cArr"
                          :key="item.value"
                          :label="item.city"
                          :value="item.cityid">
                      </el-option>
                  </el-select>
                  <el-select v-model="areaid" placeholder="请选择县/区" @change="getD">
                      <el-option
                          v-for="item in aArr"
                          :key="item.value"
                          :label="item.area"
                          :value="item.areaid">
                      </el-option>
                  </el-select>
              </el-form-item>
          </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "addressLink",
      data(){
          return {
            provinceid: '',
            cityid: '',
            areaid: '',
            pArr: [],
            cArr: [],
            aArr: [],
          }
      },
      props: ['editInfo'],
      methods:{
          loadopen() {
              this.loading = this.$loading({
                  lock: true,
                  text: 'Loading',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.2)'
              });

              setTimeout(() => {this.loading.close();}, 5000);
          },
          loadclose() {
              this.loading.close();
          },
        getP(){
            this.loadopen();
          this.config.post('/common/address/getProvinces', {}).then(res=>{
              this.loadclose();
            if(res.data.code==='0'){
              this.pArr = res.data.list;
              // if(this.editInfo.provinces_id){this.provinceid=this.editInfo.provinces_id}
            }else{
              layer.msg(res.data.message);
            }
          })
        },
        getC(){
          if(!this.provinceid) return;
            this.loadopen();
          this.config.post('/common/address/getCitis', {
            provinceid: this.provinceid,
          }).then(res=>{
              this.loadclose();
            if(res.data.code==='0'){
              this.cArr = res.data.list;
              // if(this.editInfo.cities_id){this.cityid=this.editInfo.cities_id}
            }else{
              layer.msg(res.data.message);
            }
          })
        },
        getA(){
          if(!this.cityid) return;
            this.loadopen();
          this.config.post('/common/address/getAreas', {
            cityid: this.cityid,
          }).then(res=>{
              this.loadclose();
            if(res.data.code==='0'){
              this.aArr = res.data.list;
              // if(this.editInfo.areas_id){this.areaid=this.editInfo.areas_id}
            }else{
                this.$message.error(this.config.handleError(res.data));
            }
          })
        },
        // 完成
        getD(){
          if(this.areaid){
            this.$emit('addressChange', {provinceid: this.provinceid, cityid: this.cityid, areaid: this.areaid,});
          }
        },
        // 返显
        show(obj){
          this.provinceid = obj.provinces_id || '';
          this.getC();
          setTimeout(()=>{
            this.cityid = obj.cities_id || '';
            this.getA();
          }, 200);
          setTimeout(()=>{
            this.areaid = obj.areas_id || '';
          }, 400);
        },
      },
      mounted(){
          this.show(this.editInfo)
          this.getP();
      }
    }
</script>

<style scoped>

</style>
